// components/waterfall/waterfall.js
const app = getApp();
let leftHeight = 0, rightHeight = 0; //分别定义左右两边的高度
let query = {};

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    "requestFunc": {
      "type": Function,
      "value": null
    },
    "perPageNum": {
      "type": Number,
      "value": 10
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    "leftList": [],
    "rightList": [],
    "page": 1,
    "list": [],
    "isEmpty": 1,
    "total": 0,
    "total_page": 0
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    ready: function () {
      query = wx.createSelectorQuery().in(this);
      this.requestData();
      this.render();
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    }
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    async render () {
      var leftList = this.data.leftList;
      var rightList = this.data.rightList;
      var dataLength = this.data.list.length;
      if(dataLength > 0)
      {
        this.setData({
          "isEmpty": 0
        });
        for (let i = 0, len = dataLength; i < len; i++) {
          let tmp = this.data.list[i];
          if (leftHeight == rightHeight) {
            leftList.push(tmp);
          } else if (leftHeight < rightHeight) {
            leftList.push(tmp);
          } else {
            rightList.push(tmp);
          }
          await this.resetListHeight(leftList,rightList);
        }
      }else{
        if(this.data.page == 1)
        {
          this.setData({
            "isEmpty": 1
          });
        }
      }
    },
    resetListHeight(leftList,rightList) {
      return new Promise((resolve, reject) => {
        this.setData({ 
          "leftList": leftList,
          "rightList": rightList
        }, () => {
          query.select('.waterfall-list').boundingClientRect();
          query.select('.waterfall-list.right').boundingClientRect();
          query.exec((res) => {
            if (res[0] ){
              leftHeight = res[0].height; //获取左边列表的高度
              rightHeight = res[1].height; //获取右边列表的高度
            }
            resolve();
          });
        });
      });
    },  
    requestData: function () {
      if(typeof this.properties.requestFunc === "function")
      {
        var data = this.properties.requestFunc();
        this.setData({
          "total": data.total,
          "total_page": data.total_page,
          "list": data.list
        });
      }
    },
    loadMore: function () {
      var page = this.data.page + 1;
      if(this.data.page >= this.data.total_page)
      {
        return;
      }
      this.setData({
        page: page
      });
      this.requestData();
      this.render();
    },
    reset: function() {
      leftHeight = 0, rightHeight = 0;
      query = {};
      this.setData({
        "leftList": [],
        "rightList": [],
        "page": 1,
        "list": [],
        "isEmpty": 1,
        "total": 0,
        "total_page": 0
      });
      query = wx.createSelectorQuery().in(this);
      this.requestData();
      this.render();
    }
  }
})